﻿@page "/component/common/button"

<Pager DataSource="Menu">
    <Body>

        <Header1 Divider>
            Button
            <SubHeader>
                A button indicates a possible user action
            </SubHeader>
        </Header1>

        <PresentationPart Title="Button" Id="button">
            <Description>
                A standard button.
            </Description>
            <RunTemplate>
                <Button>Button</Button>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Button>Button</Button>
```
")

            </CodeTemplate>
        </PresentationPart>

        <PresentationPart Title="Emphasis" Id="emphasis">
            <Description>
                A button can be formatted to show different levels of emphasis.
            </Description>
            <RunTemplate>
                <Button>Default</Button>
                <Button Emphasis="Emphasis.Primary">Primary</Button>
                <Button Emphasis="Emphasis.Secondary">Secondary</Button>
                <Button Emphasis="Emphasis.Positive">Positive</Button>
                <Button Emphasis="Emphasis.Negative">Negative</Button>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Button>Default</Button>
<Button Emphasis=""Emphasis.Primary"">Primary</Button>
<Button Emphasis=""Emphasis.Secondary"">Secondary</Button>
<Button Emphasis=""Emphasis.Positive"">Positive</Button>
<Button Emphasis=""Emphasis.Negative"">Negative</Button>
```
")
            </CodeTemplate>
        </PresentationPart>

        <PresentationPart Title="Animated" Id="animated">
            <Description>
                A button can animate to show hidden content
                <Message>
                    The button will be automatically sized according to the visible content size. Make sure there is enough room for the hidden content to show.
                </Message>
            </Description>
            <RunTemplate>
                <Button Animated>
                    <Content Visible>Next</Content>
                    <Content Hidden>
                        <Icon IconClass="right arrow" />
                    </Content>
                </Button>
                <Button Animated Vertical Emphasis="Emphasis.Primary">
                    <Content Hidden>Cart</Content>
                    <Content Visible>
                        <Icon IconClass="shop" />
                    </Content>
                </Button>
                <Button Animated Fade Emphasis="Emphasis.Positive">
                    <Content Visible>Become a VIP</Content>
                    <Content Hidden>Only ￥99.98</Content>
                </Button>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Button Animated>
    <Content Visible>Next</Content>
    <Content Hidden>
        <Icon IconClass=""right arrow""/>
    </Content>
</Button>
<Button Animated Vertical Emphasis=""Emphasis.Primary"">
    <Content Hidden>Cart</Content>
    <Content Visible>
        <Icon IconClass=""shop"" />
    </Content>
</Button>
<Button Animated Fade Emphasis=""Emphasis.Positive"">
    <Content Visible>Become a VIP</Content>
    <Content Hidden>Only ￥99.98</Content>
</Button>
```
")
            </CodeTemplate>
        </PresentationPart>


        <PresentationPart Title="Labeled" Id="labeled">
            <Description>
                A button can appear alongside a label.
            </Description>
            <RunTemplate>
                <Labeled Button>
                    <Button><Icon IconClass="heart" /> Like</Button>
                    <Label Basic>1024</Label>
                </Labeled>

                <Labeled Button Left>
                    <Label Basic Pointer="RelativePosition.Right">236</Label>
                    <Button><Icon IconClass="heart" /> Like</Button>
                </Labeled>

                <Labeled Button>
                    <Button Color="Color.Red"><Icon IconClass="heart" /> Like</Button>
                    <Label Basic Pointer="RelativePosition.Left" Color="Color.Red">236</Label>
                </Labeled>
                <Labeled Button>
                    <Button Color="Color.Blue"><Icon IconClass="fork" /></Button>
                    <Label Basic Pointer="RelativePosition.Left" Color="Color.Blue">236</Label>
                </Labeled>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Labeled Button>
    <Button><Icon IconClass=""heart"" /> Like</Button>
    <Label Basic>1024</Label>
</Labeled>

<Labeled Button Left>
    <Label Basic Pointer=""RelativePosition.Right"">236</Label>
    <Button><Icon IconClass=""heart"" /> Like</Button>
</Labeled>

<Labeled Button>
    <Button Color=""Color.Red""><Icon IconClass=""heart"" /> Like</Button>
    <Label Basic Pointer=""RelativePosition.Left"" Color=""Color.Red"">236</Label>
</Labeled>
<Labeled Button>
    <Button Color=""Color.Blue""><Icon IconClass=""fork"" /></Button>
    <Label Basic Pointer=""RelativePosition.Left"" Color=""Color.Blue"">236</Label>
</Labeled>
```
")
            </CodeTemplate>
        </PresentationPart>

        <PresentationPart Title="Icon">
            <Description>
                A button can have only an icon.
            </Description>
            <RunTemplate>
                <Button IconOnly>
                    <Icon IconClass="cloud" />
                </Button>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Button IconOnly>
    <Icon IconClass=""cloud""/>
</Button>
```
")
            </CodeTemplate>
        </PresentationPart>

        <PresentationPart Title="Labeled Icon">
            <Description>
                A button can use an icon as a label.
            </Description>
            <RunTemplate>
                <Button IconLabeled="HorizontalPosition.Left">
                    <Icon IconClass="pause" /> Pause
                </Button>
                <Button IconLabeled="HorizontalPosition.Right">
                    <Icon IconClass="play" /> Play
                </Button>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Button IconLabeled=""HorizontalPosition.Left"">
    <Icon IconClass=""pause""/> Pause
</Button>
<Button IconLabeled=""HorizontalPosition.Right"">
    <Icon IconClass=""play"" /> Play
</Button>
```
")
            </CodeTemplate>
        </PresentationPart>

        <PresentationPart Title="Outline" Id="basic">
            <Description>
                A basic button is less pronounced.
            </Description>
            <RunTemplate>
                <Button Style="ButtonStyle.Outline">Default</Button>
                <Button Style="ButtonStyle.Outline" Emphasis="Emphasis.Primary">Primary</Button>
                <Button Style="ButtonStyle.Outline" Emphasis="Emphasis.Secondary">Secondary</Button>
                <Button Style="ButtonStyle.Outline" Emphasis="Emphasis.Positive">Positive</Button>
                <Button Style="ButtonStyle.Outline" Emphasis="Emphasis.Negative">Negative</Button>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Button Style=""ButtonStyle.Outline"">Default</Button>
<Button Style=""ButtonStyle.Outline"" Emphasis=""Emphasis.Primary"">Primary</Button>
<Button Style=""ButtonStyle.Outline"" Emphasis=""Emphasis.Secondary"">Secondary</Button>
<Button Style=""ButtonStyle.Outline"" Emphasis=""Emphasis.Positive"">Positive</Button>
<Button Style=""ButtonStyle.Outline"" Emphasis=""Emphasis.Negative"">Negative</Button>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Underline">
            <Description>
                An none bordered less important button.
            </Description>
            <RunTemplate>
                <Button Style="ButtonStyle.Underline">Default</Button>
                <Button Style="ButtonStyle.Underline" Emphasis="Emphasis.Primary">Primary</Button>
                <Button Style="ButtonStyle.Underline" Emphasis="Emphasis.Secondary">Secondary</Button>
                <Button Style="ButtonStyle.Underline" Emphasis="Emphasis.Positive">Positive</Button>
                <Button Style="ButtonStyle.Underline" Emphasis="Emphasis.Negative">Negative</Button>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Button Style=""ButtonStyle.Underline"">Default</Button>
<Button Style=""ButtonStyle.Underline"" Emphasis=""Emphasis.Primary"">Primary</Button>
<Button Style=""ButtonStyle.Underline"" Emphasis=""Emphasis.Secondary"">Secondary</Button>
<Button Style=""ButtonStyle.Underline"" Emphasis=""Emphasis.Positive"">Positive</Button>
<Button Style=""ButtonStyle.Underline"" Emphasis=""Emphasis.Negative"">Negative</Button>
```
")
            </CodeTemplate>
        </PresentationPart>

        <PresentationPart Title="Color" Id="color">
            <RunTemplate>
                <Button Color="Color.Red">Red</Button>
                <Button Color="Color.Orange">Orange</Button>
                <Button Color="Color.Yellow">Yellow</Button>
                <Button Color="Color.Olive">Olive</Button>
                <Button Color="Color.Green">Green</Button>
                <Button Color="Color.Teal">Teal</Button>
                <Button Color="Color.Violet">Violet</Button>
                <Button Color="Color.Purple">Purple</Button>
                <Button Color="Color.Pink">Pink</Button>
                <Button Color="Color.Brown">Brown</Button>
                <Button Color="Color.Grey">Grey</Button>
                <Button Color="Color.Black">Black</Button>
                <br /><br />
                <Button  Style="ButtonStyle.Outline" Color="Color.Red">Red</Button>
                <Button  Style="ButtonStyle.Outline" Color="Color.Orange">Orange</Button>
                <Button  Style="ButtonStyle.Outline" Color="Color.Yellow">Yellow</Button>
                <Button  Style="ButtonStyle.Outline" Color="Color.Olive">Olive</Button>
                <Button  Style="ButtonStyle.Outline" Color="Color.Green">Green</Button>
                <Button  Style="ButtonStyle.Outline" Color="Color.Teal">Teal</Button>
                <Button  Style="ButtonStyle.Outline" Color="Color.Violet">Violet</Button>
                <Button  Style="ButtonStyle.Outline" Color="Color.Purple">Purple</Button>
                <Button  Style="ButtonStyle.Outline" Color="Color.Pink">Pink</Button>
                <Button  Style="ButtonStyle.Outline" Color="Color.Brown">Brown</Button>
                <Button  Style="ButtonStyle.Outline" Color="Color.Grey">Grey</Button>
                <Button  Style="ButtonStyle.Outline" Color="Color.Black">Black</Button>

                <br /><br />
                <Button Style="ButtonStyle.Underline" Color="Color.Red">Red</Button>
                <Button Style="ButtonStyle.Underline" Color="Color.Orange">Orange</Button>
                <Button Style="ButtonStyle.Underline" Color="Color.Yellow">Yellow</Button>
                <Button Style="ButtonStyle.Underline" Color="Color.Olive">Olive</Button>
                <Button Style="ButtonStyle.Underline" Color="Color.Green">Green</Button>
                <Button Style="ButtonStyle.Underline" Color="Color.Teal">Teal</Button>
                <Button Style="ButtonStyle.Underline" Color="Color.Violet">Violet</Button>
                <Button Style="ButtonStyle.Underline" Color="Color.Purple">Purple</Button>
                <Button Style="ButtonStyle.Underline" Color="Color.Pink">Pink</Button>
                <Button Style="ButtonStyle.Underline" Color="Color.Brown">Brown</Button>
                <Button Style="ButtonStyle.Underline" Color="Color.Grey">Grey</Button>
                <Button Style="ButtonStyle.Underline" Color="Color.Black">Black</Button>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Button Color=""Color.Red"">Red</Button>
<Button Color=""Color.Orange"">Orange</Button>
<Button Color=""Color.Yellow"">Yellow</Button>
<Button Color=""Color.Olive"">Olive</Button>
<Button Color=""Color.Green"">Green</Button>
<Button Color=""Color.Teal"">Teal</Button>
<Button Color=""Color.Violet"">Violet</Button>
<Button Color=""Color.Purple"">Purple</Button>
<Button Color=""Color.Pink"">Pink</Button>
<Button Color=""Color.Brown"">Brown</Button>
<Button Color=""Color.Grey"">Grey</Button>
<Button Color=""Color.Black"">Black</Button>

<Button Style=""ButtonStyle.Outline"" Color=""Color.Red"">Red</Button>
<Button Style=""ButtonStyle.Outline"" Color=""Color.Orange"">Orange</Button>
<Button Style=""ButtonStyle.Outline"" Color=""Color.Yellow"">Yellow</Button>
<Button Style=""ButtonStyle.Outline"" Color=""Color.Olive"">Olive</Button>
<Button Style=""ButtonStyle.Outline"" Color=""Color.Green"">Green</Button>
<Button Style=""ButtonStyle.Outline"" Color=""Color.Teal"">Teal</Button>
<Button Style=""ButtonStyle.Outline"" Color=""Color.Violet"">Violet</Button>
<Button Style=""ButtonStyle.Outline"" Color=""Color.Purple"">Purple</Button>
<Button Style=""ButtonStyle.Outline"" Color=""Color.Pink"">Pink</Button>
<Button Style=""ButtonStyle.Outline"" Color=""Color.Brown"">Brown</Button>
<Button Style=""ButtonStyle.Outline"" Color=""Color.Grey"">Grey</Button>
<Button Style=""ButtonStyle.Outline"" Color=""Color.Black"">Black</Button>


<Button Style=""ButtonStyle.Underline"" Color=""Color.Red"">Red</Button>
<Button Style=""ButtonStyle.Underline"" Color=""Color.Orange"">Orange</Button>
<Button Style=""ButtonStyle.Underline"" Color=""Color.Yellow"">Yellow</Button>
<Button Style=""ButtonStyle.Underline"" Color=""Color.Olive"">Olive</Button>
<Button Style=""ButtonStyle.Underline"" Color=""Color.Green"">Green</Button>
<Button Style=""ButtonStyle.Underline"" Color=""Color.Teal"">Teal</Button>
<Button Style=""ButtonStyle.Underline"" Color=""Color.Violet"">Violet</Button>
<Button Style=""ButtonStyle.Underline"" Color=""Color.Purple"">Purple</Button>
<Button Style=""ButtonStyle.Underline"" Color=""Color.Pink"">Pink</Button>
<Button Style=""ButtonStyle.Underline"" Color=""Color.Brown"">Brown</Button>
<Button Style=""ButtonStyle.Underline"" Color=""Color.Grey"">Grey</Button>
<Button Style=""ButtonStyle.Underline"" Color=""Color.Black"">Black</Button>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Inverted" Id="inverted">
            <Description>
                A button can be formatted to appear on dark backgrounds.
            </Description>
            <RunTemplate>

                <Segment Inverted>
                    <Button Inverted Color="Color.Red">Red</Button>
                    <Button Inverted Color="Color.Orange">Orange</Button>
                    <Button Inverted Color="Color.Yellow">Yellow</Button>
                    <Button Inverted Color="Color.Olive">Olive</Button>
                    <Button Inverted Color="Color.Green">Green</Button>
                    <Button Inverted Color="Color.Teal">Teal</Button>
                    <Button Inverted Color="Color.Violet">Violet</Button>
                    <Button Inverted Color="Color.Purple">Purple</Button>
                    <Button Inverted Color="Color.Pink">Pink</Button>
                    <Button Inverted Color="Color.Brown">Brown</Button>
                    <Button Inverted Color="Color.Grey">Grey</Button>
                    <Button Inverted Color="Color.Black">Black</Button>
                </Segment>

                <Segment Inverted>
                    <Button Inverted Style="ButtonStyle.Outline" Color="Color.Red">Red</Button>
                    <Button Inverted Style="ButtonStyle.Outline" Color="Color.Orange">Orange</Button>
                    <Button Inverted Style="ButtonStyle.Outline" Color="Color.Yellow">Yellow</Button>
                    <Button Inverted Style="ButtonStyle.Outline" Color="Color.Olive">Olive</Button>
                    <Button Inverted Style="ButtonStyle.Outline" Color="Color.Green">Green</Button>
                    <Button Inverted Style="ButtonStyle.Outline" Color="Color.Teal">Teal</Button>
                    <Button Inverted Style="ButtonStyle.Outline" Color="Color.Violet">Violet</Button>
                    <Button Inverted Style="ButtonStyle.Outline" Color="Color.Purple">Purple</Button>
                    <Button Inverted Style="ButtonStyle.Outline" Color="Color.Pink">Pink</Button>
                    <Button Inverted Style="ButtonStyle.Outline" Color="Color.Brown">Brown</Button>
                    <Button Inverted Style="ButtonStyle.Outline" Color="Color.Grey">Grey</Button>
                    <Button Inverted Style="ButtonStyle.Outline" Color="Color.Black">Black</Button>
                </Segment>

                
                <Segment Inverted>
                    <Button Inverted Style="ButtonStyle.Underline" Color="Color.Red">Red</Button>
                    <Button Inverted Style="ButtonStyle.Underline" Color="Color.Orange">Orange</Button>
                    <Button Inverted Style="ButtonStyle.Underline" Color="Color.Yellow">Yellow</Button>
                    <Button Inverted Style="ButtonStyle.Underline" Color="Color.Olive">Olive</Button>
                    <Button Inverted Style="ButtonStyle.Underline" Color="Color.Green">Green</Button>
                    <Button Inverted Style="ButtonStyle.Underline" Color="Color.Teal">Teal</Button>
                    <Button Inverted Style="ButtonStyle.Underline" Color="Color.Violet">Violet</Button>
                    <Button Inverted Style="ButtonStyle.Underline" Color="Color.Purple">Purple</Button>
                    <Button Inverted Style="ButtonStyle.Underline" Color="Color.Pink">Pink</Button>
                    <Button Inverted Style="ButtonStyle.Underline" Color="Color.Brown">Brown</Button>
                    <Button Inverted Style="ButtonStyle.Underline" Color="Color.Grey">Grey</Button>
                    <Button Inverted Style="ButtonStyle.Underline" Color="Color.Black">Black</Button>
                </Segment>
            </RunTemplate>
            <CodeTemplate>

@Code.GetCode(@"
```html
<Segment Inverted>
    <Button Inverted Color=""Color.Red"">Red</Button>
    <Button Inverted Color=""Color.Orange"">Orange</Button>
    <Button Inverted Color=""Color.Yellow"">Yellow</Button>
    <Button Inverted Color=""Color.Olive"">Olive</Button>
    <Button Inverted Color=""Color.Green"">Green</Button>
    <Button Inverted Color=""Color.Teal"">Teal</Button>
    <Button Inverted Color=""Color.Violet"">Violet</Button>
    <Button Inverted Color=""Color.Purple"">Purple</Button>
    <Button Inverted Color=""Color.Pink"">Pink</Button>
    <Button Inverted Color=""Color.Brown"">Brown</Button>
    <Button Inverted Color=""Color.Grey"">Grey</Button>
    <Button Inverted Color=""Color.Black"">Black</Button>
</Segment>

<Segment Inverted>
    <Button Inverted Style=""ButtonStyle.Outline"" Color=""Color.Red"">Red</Button>
    <Button Inverted Style=""ButtonStyle.Outline"" Color=""Color.Orange"">Orange</Button>
    <Button Inverted Style=""ButtonStyle.Outline"" Color=""Color.Yellow"">Yellow</Button>
    <Button Inverted Style=""ButtonStyle.Outline"" Color=""Color.Olive"">Olive</Button>
    <Button Inverted Style=""ButtonStyle.Outline"" Color=""Color.Green"">Green</Button>
    <Button Inverted Style=""ButtonStyle.Outline"" Color=""Color.Teal"">Teal</Button>
    <Button Inverted Style=""ButtonStyle.Outline"" Color=""Color.Violet"">Violet</Button>
    <Button Inverted Style=""ButtonStyle.Outline"" Color=""Color.Purple"">Purple</Button>
    <Button Inverted Style=""ButtonStyle.Outline"" Color=""Color.Pink"">Pink</Button>
    <Button Inverted Style=""ButtonStyle.Outline"" Color=""Color.Brown"">Brown</Button>
    <Button Inverted Style=""ButtonStyle.Outline"" Color=""Color.Grey"">Grey</Button>
    <Button Inverted Style=""ButtonStyle.Outline"" Color=""Color.Black"">Black</Button>
</Segment>

<Segment Inverted>
    <Button Inverted Style=""ButtonStyle.Underline"" Color=""Color.Red"">Red</Button>
    <Button Inverted Style=""ButtonStyle.Underline"" Color=""Color.Orange"">Orange</Button>
    <Button Inverted Style=""ButtonStyle.Underline"" Color=""Color.Yellow"">Yellow</Button>
    <Button Inverted Style=""ButtonStyle.Underline"" Color=""Color.Olive"">Olive</Button>
    <Button Inverted Style=""ButtonStyle.Underline"" Color=""Color.Green"">Green</Button>
    <Button Inverted Style=""ButtonStyle.Underline"" Color=""Color.Teal"">Teal</Button>
    <Button Inverted Style=""ButtonStyle.Underline"" Color=""Color.Violet"">Violet</Button>
    <Button Inverted Style=""ButtonStyle.Underline"" Color=""Color.Purple"">Purple</Button>
    <Button Inverted Style=""ButtonStyle.Underline"" Color=""Color.Pink"">Pink</Button>
    <Button Inverted Style=""ButtonStyle.Underline"" Color=""Color.Brown"">Brown</Button>
    <Button Inverted Style=""ButtonStyle.Underline"" Color=""Color.Grey"">Grey</Button>
    <Button Inverted Style=""ButtonStyle.Underline"" Color=""Color.Black"">Black</Button>
</Segment>
```
")

            </CodeTemplate>
        </PresentationPart>


        <PresentationPart Title="Conditionals" Id="or">
            <Description>
                Button groups can contain conditionals.
            </Description>
            <RunTemplate>
                <ButtonGroup IconOnly>
                    <Button><Icon IconClass="arrow left" /> Left</Button>
                    <Or />
                    <Button>Right <Icon IconClass="arrow right" /> </Button>
                </ButtonGroup>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<ButtonGroup Icon>
    <Button><Icon IconClass=""arrow left""/> Left</Button>
    <Or/>
    <Button>Right <Icon IconClass=""arrow right""/> </Button>
</ButtonGroup>
```
")
            </CodeTemplate>
        </PresentationPart>

        <PresentationPart>
            <Description>
                Use <code>Text</code> to set custom text.
            </Description>
            <RunTemplate>
                <ButtonGroup>
                    <Button Emphasis="Emphasis.Positive">Positive</Button>
                    <Or Text="vs" />
                    <Button Emphasis="Emphasis.Negative">Negative</Button>
                </ButtonGroup>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<ButtonGroup>
    <Button Emphasis=""Emphasis.Positive"">Positive</Button>
    <Or Text=""vs"" />
    <Button Emphasis=""Emphasis.Negative"">Negative</Button>
</ButtonGroup>
```
")
            </CodeTemplate>
        </PresentationPart>

        <PresentationPart Title="Active" Id="active">
            <Description>
                A button can show it is currently the active user selection.
            </Description>
            <RunTemplate>
                <Button Active>Followed</Button>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Button Active>Followed</Button>
```
")
            </CodeTemplate>
        </PresentationPart>

        <PresentationPart Title="Disabled" Id="disabled">
            <Description>
                A button can show it is currently unable to be interacted with.
            </Description>
            <RunTemplate>
                <Button Disabled>Pending</Button>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Button Disabled>Pending</Button>
```
")
            </CodeTemplate>
        </PresentationPart>

        <PresentationPart Title="Loading" Id="loading">
            <Description>A button can show a loading indicator.</Description>
            <RunTemplate>
                <Button Loading></Button>
                <Button Loading Style="ButtonStyle.Outline"></Button>
                <Button Loading Emphasis="Emphasis.Positive"></Button>
                <Button Loading Color="Color.Purple"></Button>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Button Loading></Button>
<Button Loading Style=""ButtonStyle.Outline""></Button>
<Button Loading Emphasis=""Emphasis.Positive"" ></Button>
<Button Loading Color=""Color.Purple""></Button>
```
")
            </CodeTemplate>
        </PresentationPart>

        <PresentationPart Title="Size" Id="size">
            <Description>A button can have different sizes.</Description>
            <RunTemplate>
                <Button Size="Size.Mini">Mini</Button>
                <Button Size="Size.Tiny">Tiny</Button>
                <Button Size="Size.Small">Small</Button>
                <Button Size="Size.Medium">Medium</Button>
                <Button Size="Size.Large">Large</Button>
                <Button Size="Size.Big">Big</Button>
                <Button Size="Size.Huge">Huge</Button>
                <Button Size="Size.Massive">Massive</Button>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Button Size=""Size.Mini"">Mini</Button>
<Button Size=""Size.Tiny"">Tiny</Button>
<Button Size=""Size.Small"">Small</Button>
<Button Size=""Size.Medium"">Medium</Button>
<Button Size=""Size.Large"">Large</Button>
<Button Size=""Size.Big"">Big</Button>
<Button Size=""Size.Huge"">Huge</Button>
<Button Size=""Size.Massive"">Massive</Button>
```
")

            </CodeTemplate>
        </PresentationPart>

        <PresentationPart Title="Fluid" Id="fluid">
            <Description>A button can take the width of its container.</Description>
            <RunTemplate>
                <Button Fluid>Fluid Button</Button>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Button Fluid>Fluid Button</Button>
```
")
            </CodeTemplate>
        </PresentationPart>

        <PresentationPart Title="Circular" Id="circular">
            <Description>A button can be circular.</Description>
            <RunTemplate>
                <Button Circular IconOnly><Icon IconClass="cogs" /></Button>
                <Button Circular IconOnly Color="Color.Red"><Icon IconClass="google" /></Button>
                <Button Circular IconOnly Color="Color.Violet"><Icon IconClass="linkedin" /></Button>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Button Circular IconOnly><Icon IconClass=""cogs""/></Button>
<Button Circular IconOnly Color=""Color.Red""><Icon IconClass=""google"" /></Button>
<Button Circular IconOnly Color=""Color.Violet""><Icon IconClass=""linkedin"" /></Button>
```
")
            </CodeTemplate>
        </PresentationPart>

        <PresentationPart Title="Vertical Attached" Id="attached">
            <Description>A button can be attached to the top or bottom of other content.</Description>
            <RunTemplate>
                <ButtonGroup Span="SpanSize.Is2" Attached AttachedVertical="VerticalPosition.Top">
                    <Button>Button</Button>
                    <Button>Button</Button>
                </ButtonGroup>
                <Segment Attached>
                    <ParagraphDemo />
                </Segment>
                <ButtonGroup Span="SpanSize.Is2" AttachedVertical="VerticalPosition.Bottom" Attached>
                    <Button>Button</Button>
                    <Button>Button</Button>
                </ButtonGroup>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<ButtonGroup Span=""ColSpan.Is2"" AttachedVertical=""VerticalPosition.Top"" Attached>
    <Button>Button</Button>
    <Button>Button</Button>
</ButtonGroup>
<Segment Attached>
<p style=""height:100px"">

</p>
</Segment>
<ButtonGroup Span=""ColSpan.Is2"" AttachedVertical=""VerticalPosition.Bottom"" Attached>
    <Button>Button</Button>
    <Button>Button</Button>
</ButtonGroup>
```
")
            </CodeTemplate>
        </PresentationPart>

        <PresentationPart>
            <Description>
                A button can be attached to the left or right of other content.
            </Description>
            <RunTemplate>
                <Button Attached AttachedHorizontal="HorizontalPosition.Left">Left</Button>
                <Button Attached AttachedHorizontal="HorizontalPosition.Right">Right</Button>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Button Attached AttachedHorizontal=""HorizontalPosition.Left"">Left</Button>
<Button Attached AttachedHorizontal=""HorizontalPosition.Left"">Right</Button>
```
")
            </CodeTemplate>
        </PresentationPart>


        <PresentationPart Title="Button Group" Id="buttons">
            <Description>
                Buttons can exist together as a group.
            </Description>
            <RunTemplate>
                <ButtonGroup>
                    <Button>Create</Button>
                    <Button>Update</Button>
                    <Button>Delete</Button>
                </ButtonGroup>
                <ButtonGroup Vertical>
                    <Button>Create</Button>
                    <Button>Update</Button>
                    <Button>Delete</Button>
                </ButtonGroup>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<ButtonGroup>
    <Button>Create</Button>
    <Button>Update</Button>
    <Button>Delete</Button>
</ButtonGroup>
<ButtonGroup Vertical>
    <Button>Create</Button>
    <Button>Update</Button>
    <Button>Delete</Button>
</ButtonGroup>
```
")
            </CodeTemplate>
        </PresentationPart>

        <PresentationPart Title="Icon Buttons">
            <Description>
                Button groups can show groups of icons.
            </Description>
            <RunTemplate>
                <ButtonGroup IconOnly>
                    <Button><Icon IconClass="plus" /></Button>
                    <Button><Icon IconClass="pencil" /></Button>
                    <Button><Icon IconClass="trash" /></Button>
                </ButtonGroup>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<ButtonGroup IconOnly>
    <Button><Icon IconClass=""plus""/></Button>
    <Button><Icon IconClass=""pencil"" /></Button>
    <Button><Icon IconClass=""trash"" /></Button>
</ButtonGroup>
```
")
            </CodeTemplate>
        </PresentationPart>
        <ParameterTable>
            <Content>
            <tr>
                <td>Emphasis</td>
                <td>Emphasis style.</td>
                <td>enum</td>
                <td></td>
            </tr>
            <tr>
                <td>Animated</td>
                <td>Has animation.</td>
                <td>bool</td>
                <td></td>
            </tr>
            <tr>
                <td>Fade</td>
                <td>Fade in/out animation style.</td>
                <td>bool</td>
                <td></td>
            </tr>
            <tr>
                <td>Color</td>
                <td>Color of button.</td>
                <td>enum</td>
                <td></td>
            </tr>
            <tr>
                <td>Inverted</td>
                <td>Adapt background color for parent component.</td>
                <td>bool</td>
                <td></td>
            </tr>
            <tr>
                <td>Size</td>
                <td>Size of button.</td>
                <td>enum</td>
                <td></td>
            </tr>
            <tr>
                <td>Style</td>
                <td>Three kinds of style, Default, Outline, Underline</td>
                <td>ButtonStyle</td>
                <td></td>
            </tr>
            <tr>
                <td>IconOnly</td>
                <td>Only display <code>Icon</code> component.</td>
                <td>bool</td>
                <td></td>
            </tr>
            <tr>
                <td>IconLabeled</td>
                <td>Display icon as label style.</td>
                <td>enum</td>
                <td></td>
            </tr>
            <tr>
                <td>Actived</td>
                <td>Actived style.</td>
                <td>bool</td>
                <td></td>
            </tr>
            <tr>
                <td>Disabled</td>
                <td>Disabled style.</td>
                <td>bool</td>
                <td></td>
            </tr>
            <tr>
                <td>Loading</td>
                <td>Loading indecator.</td>
                <td>bool</td>
                <td></td>
            </tr>
            <tr>
                <td>Fluid</td>
                <td>Full width with parent container.</td>
                <td>bool</td>
                <td></td>
            </tr>

            <tr>
                <td>Circular</td>
                <td>Circle icon.</td>
                <td>bool</td>
                <td></td>
            </tr>

            <tr>
                <td>Attached</td>
                <td>Attach to another component.</td>
                <td>bool</td>
                <td></td>
            </tr>
            <tr>
                <td>AttachedHorizontal</td>
                <td>Attach horizontal position</td>
                <td>enum</td>
                <td></td>
            </tr>
            <tr>
                <td>AttachedVertical</td>
                <td>Attach vertical position.</td>
                <td>enum</td>
                <td></td>
            </tr>
            </Content>

        </ParameterTable>
        <MethodTable>
            <Content>
            <tr>
                <td>Disable(bool diabled = true)</td>
                <td>Performs a disabled action.</td>
            </tr>
            <tr>
                <td>Active(bool active = true)</td>
                <td>Performs am active action.</td>
            </tr>
            </Content>
        </MethodTable>
    </Body>
</Pager>

@code {
    List<string> Menu = new List<string>(new[]
                                                    {
         "Button",
        "Emphasis",
         "Animated",
        "Labeled",
         "Icon",
        "Labeled Icon",
        "Outline",
        "Underline",
        "Color",
        "Inverted",
        "Conditionals",
       "Actived",
        "Disabled",
        "Loading",
        "Size",
        "Fluid",
        "Circular",
        "Vertical Attached",
        "Button Group",
        "Icon Buttons",
        "Parameters",
        "Methods"
    });
}